<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :mode="menuMode" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
      <template v-for="item in menuList">
       <template v-if="!item.meta.hideInMenu">
         <template v-if="item.children && item.children.length == 1">
           <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
           <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
         </template>
         <template v-else>
           <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
           <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
         </template>
       </template>
      </template>
      <template>
        <Submenu name="1">
          <template slot="title">
            <!--<common-icon />      -->
            <i class="ivu-icon"></i>
            <span> {{ $t('components.user.signOut')}}</span>
          </template>
          <MenuItem name="1-1">
            <div>{{$t('components.user.signOut')}}</div>
          </MenuItem>
          <MenuItem name="1-2">
            <!--<common-icon />-->
            <div>中文</div>
          </MenuItem>
          <MenuItem name="1-3">
            <!--<common-icon />-->
            <div>English</div>
          </MenuItem>
        </Submenu>
      </template>
    </Menu>
    <!-- <div class="menu-collapsed" v-show="collapsed" :list="menuList"> -->
    <!-- <div class="menu-collapsed" v-show="collapsed">
      <template v-for="item in menuList">
        <collapsed-menu v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
        <Tooltip transfer v-else :content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right" :key="`drop-menu-${item.name}`">
          <a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :size="rootIconSize" :color="textColor" :type="item.icon || (item.children && item.children[0].icon)"/></a>
        </Tooltip>
      </template>
    </div> -->
  </div>
</template>
<script>
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'
import {mapActions} from 'vuex'

export default {
  name: 'SideMenu',
  mixins: [ mixin ],
  components: {
    SideMenuItem,
    CollapsedMenu
  },
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: 'dark'
    },
    rootIconSize: {
      type: Number,
      default: 20
    },
    iconSize: {
      type: Number,
      default: 16
    },
    accordion: Boolean,
    activeName: {
      type: String,
      default: ''
    },
    openNames: {
      type: Array,
      default: () => []
    },
    menuMode: {
      type: String,
      default: 'vertical',
    },
  },
  data () {
    return {
      openedNames: []
    }
  },
  created() {
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout() {
      this.$http.loginOut().then(res => {
        this.$localStore.set('token', '');
        this.$localStore.set('login_uid', '');
        this.$localStore.set('login_username', '');
        // 清空权限的缓存
        this.$store.commit('SETPUBLICSIDEMENU', []);
        this.$router.push({
          name: 'login'
        });
        // location.reload()
      });
    },
    zh() {
      console.log("点击中文")
      this.$i18n.locale = 'zh-cn';
      this.$store.commit('SETLOCALE', 'zh-cn');
    },
    en() {
      this.$i18n.locale = 'en';
      this.$store.commit('SETLOCALE', 'en');
    },
    handleSelect (name) {
      if (name == '1-1') {
        this.logout()
      }
      if (name == '1-2') {
        this.zh()
        return
      }
      if (name == '1-3') {
        this.en()
        return;
      }
      this.$emit('on-select', name)
    },
    getOpenedNamesByActiveName (name) {
      return this.$route.matched.map(item => item.name).filter(item => item !== name)
    },
    updateOpenName (name) {
      if (name == this.$config.homeName || this.menuMode === 'horizontal') this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
    },
  },
  computed: {
    textColor () {
      return this.theme == 'dark' ? '#fff' : '#495060'
    }
  },
  watch: {
    activeName (name) {
      if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
      else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
    },
    openNames (newNames) {
      this.openedNames = newNames
    },
    openedNames () {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened()
      })
    },
    // menuList() {
    //   this.$nextTick(() => {
    //     const elSubTitle = document.querySelectorAll('.left-sider .ivu-menu-submenu');
    //     elSubTitle.forEach(elItem => {
    //       const elTitle = elItem.querySelector('.ivu-menu-submenu-title');
    //       if (elTitle) {
    //         elTitle.addEventListener('click', () => {
    //           if (elItem.classList && elItem.classList.contains('ivu-menu-opened') && window.innerWidth < 760) {
    //             this.openedNames = []
    //           }
    //         });
    //       }
    //     });
    //   });
    // },
  },
  mounted () {
    this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
  }
}
</script>
<style lang="less">
@import './side-menu.less';
</style>
